import React, { useState } from 'react';
import Slider from 'react-slick';
import './TrendingProducts.scss';
import SvgIcon from '@/components/SvgIcon';
import Link from 'next/link';
import { useBreakpoints } from '@/hooks/useBreakpoints';
import useMounted from '@/hooks/useMounted';

type Props = {
  trendings: TrendProduct[];
};

function TrendingProducts({ trendings: sliceList }: Props) {
  const [mounted, setMounted] = useState(false);

  // @ts-ignore
  const SlickArrowRight = ({ currentSlide, slideCount, ...props }) => (
    <span {...props}>
      <SvgIcon name="arrow-right" size={26} />
    </span>
  );
  // @ts-ignore
  const SlickArrowLeft = ({ currentSlide, slideCount, ...props }) => (
    <span {...props}>
      <SvgIcon name="arrow-right" size={26} />
    </span>
  );

  const breakpoints = useBreakpoints();
  const getSlidesCount = () => {
    if (breakpoints.xl.up) {
      return 4;
    } else if (breakpoints.lg.up) {
      return 3;
    } else if (breakpoints.md.up) {
      return 2;
    } else {
      return 1;
    }
  };

  const slidesToShow = getSlidesCount();

  const settings = {
    dots: true,
    infinite: true,
    speed: 1200,
    fade: false,
    slidesToShow,
    slidesToScroll: slidesToShow,
    easing: 'ease-in-out',
    autoplay: false,
    autoplaySpeed: 3000,
    pauseOnHover: true,
    touchThreshold: 30,
    arrows: true,
    appendDots: (dots: any) => {
      return <ul>{dots}</ul>;
    },
    customPaging: function (i: number) {
      return <span className="dot"></span>;
    },
    // @ts-ignore
    nextArrow: <SlickArrowRight />,
    // @ts-ignore
    prevArrow: <SlickArrowLeft />,
  };

  useMounted(() => {
    setMounted(true);
  });

  return (
    <div className={`trending-products main-width ${mounted ? 'mounted' : ''}`}>
      <div className="trending-products-inner content-width">
        <div className="trending-hd flex-row items-center">
          <h2 className="title floor-hd-title">SELL BY TRENDING PRODUCTS</h2>
          <div className="line floor-hd-line"></div>
          <div className="btns"></div>
        </div>
        <Slider {...settings}>
          {sliceList.map((item, index) => (
            <div key={index} className="slider-item">
              <div className="slider-item-inner">
                <Link
                  href={`/product/${item.id}?sku=${encodeURIComponent(item.sku)}`}
                  prefetch={false}
                >
                  {/* eslint-disable-next-line */}
                  <img src={item.image} alt={'image' + index + ''} />
                  <p className="title">{item.name}</p>
                  <button className="shop-btn">SHOP</button>
                </Link>
              </div>
            </div>
          ))}
        </Slider>
      </div>
    </div>
  );
}

export default TrendingProducts;
